<template>
  <div>
    <!--    增加按钮和搜索框-->
    <div style="margin: 10px 0">
      <!--给新增button添加add方法-->
      <el-button type="primary" @click="add">新增</el-button>
      <el-button>其它</el-button>
    </div>
    <!-- 搜索-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder=" 请 输 入 关 键 字 " style="width:30%"></el-input>
      <el-button style="margin-left: 10px" type="primary" @click="list">查询</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
          prop="id"
          label="ID" sortable>
      </el-table-column>
      <el-table-column
          prop="name"
          label="家居名" >
      </el-table-column>
      <el-table-column
          prop="maker"
          label="厂家">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格">
      </el-table-column>
      <el-table-column
          prop="sales"
          label="销量">
      </el-table-column>
      <el-table-column
          prop="stock"
          label="库存">
      </el-table-column>
      <!--    增加操作列，编辑和删除  -->
      <el-table-column fixed="right" label="操作" width="120">
        <!--1、这里通过handleEdit(scope.row)
        2，可以将当前行数据传递给handleEdit-->
        <template #default="scope">
          <el-button @click="handleEdit(scope.row.id)" type="text">编辑</el-button>
          <!-- 增加 popcomfirm 控件，确认删除 -->
          <!--1.如果你点击的确定， 就会触发handleDel-->
          <!--2.如果你点击的是取消， 就不会触发handleDel-->
          <el-popconfirm
              title="确定删除吗？" @confirm="handleDel(scope.row.id)">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加家居的弹窗
    说明:
    1. el-dialog ：v-model="dialogVisible" 表示对话框, 和 dialogVisible 变量双向
    绑定,控制是否显示对话框
    2. el-form :model="form" 表示表单 ,数据和 form 数据变量双向绑定
    3. el-input v-model="form.name" 表示表单的 input 空间，名字为 name 需要和
    后台 Javabean 属性一致
    -->
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="家居名" prop="name">
          <el-input v-model="form.name" style="width: 80%"></el-input>
          {{serveValidErrors.name}}
        </el-form-item>
        <el-form-item label="厂商" prop="maker">
          <el-input v-model="form.maker" style="width: 80%"></el-input>
          {{serveValidErrors.maker}}
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" style="width: 80%"></el-input>
          {{serveValidErrors.price}}
        </el-form-item>
        <el-form-item label="销量" prop="sales">
          <el-input v-model="form.sales" style="width: 80%"></el-input>
          {{serveValidErrors.sales}}
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="form.stock" style="width: 80%"></el-input>
          {{serveValidErrors.stock}}
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!--增加 element-plus 分页控件-->
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handlePageSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
// 引入request对象
import request from "@/utils/request";
export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      serveValidErrors: {},
      //增加分页相应的数据绑定
      currentPage: 1, //当前页
      pageSize: 5,// 每页显示记录数
      total:10,//总记录数目
      search: '',//保持查询关键词，保证通过关键词分页查询时，点击下一页仍是根据关键词来分页
      dialogVisible: false,
      form: {},
      tableData: [],
      rules: {
        name: [
          {required: true, message: '请输入称家居名', trigger: 'blur'}
        ], maker: [
          {required: true, message: '请输入称制造商', trigger: 'blur'}
        ], price: [
          {required: true, message: '请输入价格', trigger: 'blur'}, {
            pattern: /^(([1-9]\d*)|(0))(\.\d+)?$/,
            message: '请输入数字',
            trigger: 'blur'
          }
        ], sales: [
          {required: true, message: '请输入销量', trigger: 'blur'}, {
            pattern: /^(([1-9]\d*)|(0))$/,
            message: '请输入数字',
            trigger: 'blur'
          }
        ], stock: [
          {required: true, message: '请输入库存', trigger: 'blur'},
          {pattern: /^(([1-9]\d*)|(0))$/, message: '请输入数字', trigger: 'blur'}
        ]
      }
    }
  },
  created(){
    this.list();//调用list方法
  },
  methods: {
    add() {
      //显示对话框
      this.dialogVisible = true
      //取消后，清空表单内容
      this.form = {}
      //清空上次校验的信息
      this.$refs['form'].resetFields()
      //清空上次后端校验信息
      this.serveValidErrors = {}
    },
    save() {//将填写的表单数据发送给后端
      //由于修改和增加都是通过点击对话框的确定，通过save方法来操作的
      //因此需要通过某些特征区分修改和增加操作
      if(this.form.id){//表示是update
        request.put("/api/update", this.form).then(res => {
          if(res.code===200){//修改成功
            this.$message({
              type:"success",
              message:"更新成功"
            })
          }else{
            this.$message({
              type:"error",
              message:"更新失败"
            })
          }
          this.dialogVisible = false
          //添加完数据后，将列表刷新
          this.list()
        })
      }else{
        //增加表单验证是否通过
        this.$refs['form'].validate(valid=>{
          //后端校验测试
          //valid=true

          //valid就是表单校验后返回的结果
          if(valid){//如果校验通过才进行后端提交
            //1. url: http://localhost:8080/ssm/save
            //2. this.form 是携带的数据
            request.post("/api/save", this.form).then(res => {
              if(res.code===200){//如果 code 为 200
                //表单不可见
                this.dialogVisible = false
                //添加完数据后，将列表刷新
                this.list()
              }else if(res.code===400){
                //取出校验失败的信息，赋给serverValidErrors
                //这是动态赋值，即动态的增加原本没有的属性
                this.serveValidErrors.name=res.extend.errorMsg.name
                this.serveValidErrors.maker=res.extend.errorMsg.maker
                this.serveValidErrors.price=res.extend.errorMsg.price
                this.serveValidErrors.sales=res.extend.errorMsg.sales
                this.serveValidErrors.stock=res.extend.errorMsg.stock
              }
            })
          }else {//验证没有通过
            this.$message(
                {
                  type:"error",
                  message:"验证失败"
                }
            )
          }
          return false//放弃提交
        })
      }
      //上面if和else语句中都有以下代码
      // this.dialogVisible = false
      // this.list()
      //那是否可以合并，写到if else 外面呢
      //答案是不可以的
      //因为 request.put("/api/update", this.form)这条代码本质是ajax
      //是异步请求，先发送请求，不会等服务器返回就会继续执行下一条代码，等服务器返回了执行里面的回调带阿米
    },
    //编写list方法，请求返回家具信息
    //list方法应该打开页面后就自动调用
    list(){
      // request.get("/api/furns").then(res=>{
      //   //console.log(res)
      //   //老韩解读:为什么是res . data.extend. furnList， 可以根据console输出的
      //   //数据结构来查看
      //   //因为老师对返回response结果进行了统一拦截处理(在utils中的request.js中配置)let res = response.data
      //   //，所以老师这里直接使用res.extend.furnList
      //   this.tableData=res.extend.furnList
      // })

      //实现请求分页接口
      request.get("/api/furnsByConditionPage",{
        params:{//指定请求所需的参数
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search
        }
      }).then(res=>{//处理返回的分页信息
        this.tableData=res.extend.pageInfo.list
        this.total=res.extend.pageInfo.total
      })
    },
    handleEdit(id){
      //将当前的家具信息绑定到弹出的对话框的form中，这样才能在对话框中显示内容
      //1. 方式:可以通过row.id 到后端DB去获取对应的家居信息，返回后将其绑定this.form
      request.get("/api/findOne/"+id).then(res=>{
        //console.log(res)
        this.form=res.extend.furn;
        this.dialogVisible=true;
      })

      //2. 方式2:把获取的row的数据通过处理，绑定到this.form 进行显示(可能存在于数据库不一致的问题)
      // this.form=JSON.parse(JSON.stringify(row));//方式二 需要将传入的参数改成row
      // this.dialogVisible=true;
    },
    handleDel(id){
      request.delete("/api/del/"+id).then(res=>{
        if(res.code===200){
          this.$message({
            type:"success",
            message:res.msg
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
        this.list()
      })
    },
    handlePageSizeChange(pageSize){
      this.pageSize=pageSize
      this.list()
    },
    handleCurrentChange(pageNum){
      //当用户点击分页超链接时，会携带pageNum
      this.currentPage=pageNum
      //发出分页请求
      this.list()
    }
  }
}
</script>
